<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="#121212">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left zindex"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.invitation") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading">
      <cloudSharePoster
        :show="true"
        :shareImgs="
          settings.app_cover_images || [
            '/static/share/share_1.png',
            '/static/share/share_1.png',
          ]
        "
        :shareCode="invitation"
        :shareHost="settings.share_link"
        @closeDialog="closeShare"
      />
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
      invitation: null,
    };
  },
  computed: {
    ...mapGetters("system", ["settings"]),
  },
  methods: {
    ...mapActions("mf/my", ["generateInvitation"]),
  },
  async onLoad() {
    this.isLoading = true;
    let {
      data: { token },
    } = await this.generateInvitation();
    this.invitation = token;
    this.isLoading = false;
  },
};
</script>

<style scoped>
.zindex {
  z-index: 10000;
}
</style>